<template>
	<view class="my-integral-padding ">
		<view class="page_one">
			<Integral :points="paymentTotal" :this_month="refundsTotal" />
			<!-- 积分使用明细 -->
			<p class="detail">
				<view>{{ $t('保证金明细') }}</view>
				<view class="flex tab">
					<text class="item" :class="{active:!wtk}" @click="wtk = !wtk">{{$t("全部账单")}}</text>
					<text class="item" :class="{active:wtk}" @click="wtk = !wtk">{{$t("未退款账单")}}</text>
				</view>
			</p>
			<!-- 使用列表 -->
			<view class="use">
				<view v-if="list.length < 1" style="margin-top: 200rpx;">
					<u-empty :text="$t('没有数据')" mode="data"></u-empty>
				</view>
				<view class="use-list" v-else>
					<ol>
						<li v-for="(item,index) in list" :key="index" :class="index===list.length-1?'':'line'">
							<view>
								<view class="_flex">
									<text class="use_span">
										{{$t("保证金状态")}}：
										<text v-if="item.pay_margin === '0'" class="tag primary">{{ $t("未支付") }}
										</text>
										<text v-if="item.pay_margin === '1'" class="tag success">{{ $t("已支付") }}
										</text>
										<text v-if="item.pay_margin === '2'" class="tag success">{{ $t("待退款") }}
										</text>
										<text v-if="item.pay_margin === '3'" class="tag error">{{ $t("已退款") }}
										</text>
										<text v-if="item.pay_margin === '4'" class="tag error">{{ $t("退款失败") }}
										</text>
									</text>
									<text class="use_span" style="margin: 5px 0;">
										{{$t("保证金退回原因")}}：
										<text v-if="item.refund_reason === '1'" class="tag primary">{{ $t("竞标失败") }}
										</text>
										<text v-if="item.refund_reason === '2'" class="tag success">{{ $t("放弃竞标") }}
										</text>
										<text v-if="item.refund_reason === '3'" class="tag success">{{ $t("订单完成") }}
										</text>
										<text v-if="item.refund_reason === '4'" class="tag error">{{ $t("订单售后") }}
										</text>
									</text>
									<text class="time">
										<text style="margin-right: 10rpx;">{{ time("S", item.createtime) }}
										</text>
									</text>
									<text class="time">
										<text v-if="item.fStatus === 'wechat'">{{ $t("待审核") }}
										</text>
										<text v-else-if="item.fStatus === 'alipay'">{{ $t("已通过") }}
										</text>
										<text v-else-if="item.fStatus === 'alipay'">{{ $t("已拒绝") }}
										</text>
										<text v-else style="display: none;">{{ $t("没有售后") }}
										</text>
									</text>
									<text class="time">
										{{item.order_no}}
									</text>
								</view>
								<view class="money" style="font-size: 28rpx;color: #19be6b;">
									{{$t("已支付")}}：{{ item.margin_amount }}
								</view>
								<view class="money" style="font-size: 28rpx;">
									{{$t("已退款")}}：{{ item.margin_refund_amount }}
								</view>
								<!-- 								<view class="money" style="font-size: 28rpx;line-height: 50rpx;"> <view>{{$t("已退款")}}：{{ item.margin_refund_amount }}</view>  <view v-if="item.arr"> {{item.arr?item.arr.transaction_id.substring(0, 9):""}}</view> </view> -->

							</view>
						</li>
					</ol>
					<!-- <view class="bottom" style="height: 78rpx;"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		time
	} from "@/common/public";
	import Integral from './element.vue'
	export default {
		data() {
			return {
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				list: [],
				points: 0,
				this_month: 0,
				//交易总金额 
				paymentTotal: 0,
				//退款总金额
				refundsTotal: 0,
				//是否查询未退款账单
				wtk: false,
			}
		},
		components: {
			Integral
		},
		onLoad() {
			this.getScoreLists()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("保证金账单")
			})
		},
		watch: {
			wtk(val) {
				this.getScoreLists()
			}
		},
		methods: {
			time,
			//积分统计
			getScoreLists() {
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				this.$u.api.order.getMarginOrder({
					pay_margin: this.wtk ? '2' : ''
				}).then(res => {
					uni.hideLoading()
					this.list = res.list
					this.paymentTotal = res.paymentTotal
					this.refundsTotal = res.refundsTotal
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-integral-padding {
		background-color: #fff;
	}

	page {
		height: 100vh;
		// background-color: #F6F6F6;
		background-color: #fff;
	}

	.page_one {
		.detail {
			border-top: 20rpx solid #f6f6f6;
			padding-left: 12rpx;
			font-size: 30rpx;
			padding-top: 30rpx;
			font-weight: 500;
			color: #3D3D3D;
			line-height: 38rpx;
			margin: 27rpx 0 27rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				float: right;
			}
		}

		.use {
			border-radius: 14rpx;

			.use-list {
				ol {
					list-style-type: none;
					padding: 0 20rpx 0 27rpx;
					//看需求，超出出滚动条
					overflow: auto;

					li {
						view {
							padding: 5px 0;
							padding-right: 23rpx;
							box-sizing: border-box;

							&::after {
								content: '';
								display: block;
								clear: both;
							}

							._flex {
								width: 70%;
								display: flex;
								float: left;
								flex-direction: column;
								justify-content: center;

								.use_span {
									font-size: 24rpx;
									word-break: break-all;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.88);
									line-height: 35rpx;

									.tag {
										margin-left: 10rpx;

										&.primary {
											color: #2979ff;
										}

										&.success {
											color: #19be6b;
										}

										&.error {
											color: #fa3534;
										}
									}
								}


								.time {
									font-size: 24rpx;
									font-weight: 400;
									color: rgba(85, 85, 85, 0.88);
									line-height: 40rpx;
									margin-top: 5rpx;
								}
							}

							.money {
								font-size: 38rpx;

								font-weight: 600;
								color: #FF5229;
								line-height: 109rpx;
								float: right;
							}
						}
					}
				}
			}
		}
	}

	.line {
		border-bottom: 2rpx solid #EBEBEB;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.tab {
		.item {
			margin-left: 24rpx;
			color: #999;
		}

		.active {
			color: #3d3d3d;
			font-weight: bold;
		}
	}
</style>